<template>
  <div>
  <el-card>
    <div>
      <el-upload
        action="/upload"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="handleChange"
        :file-list="fileList">
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>
      <el-button size="small" type="primary" @click="submit">提交</el-button>
    </div>
    <div class="demo-image">
      <div class="block" v-for="url in urls" :key="url">
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          ></el-image>
      </div>
    </div>
    <div>
      <video controls width="400">
        <source :src="videoUrl" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
    </el-card>
    <div class="book-viewer">
      <el-card>
        <div slot="header">{{ book.title }}</div>
        <div class="book-content">
          <iframe :src="pdfViewerUrl" frameborder="0"></iframe>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import friendsApi from '@/api/friends'

export default {
  data() {
    return {
      fileList: [], // 存放上传的文件
      urls: [],
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      videoUrl: 'https://sky-boy.oss-cn-hangzhou.aliyuncs.com/ycl/image/%E6%B5%B7%E8%B4%BC%E7%8E%8B.mp4', // 替换为你的视频文件路径
      book: {
        title: '示例书籍',
        url: 'https://sky-boy.oss-cn-hangzhou.aliyuncs.com/ycl/image/%E7%AE%97%E6%B3%95%E5%9B%BE%E8%A7%A3.pdf' // 替换为实际书籍的在线链接
      }
    }
  },
  computed: {
    pdfViewerUrl() {
      // 构建 PDF.js 阅读器的链接，替换 PDF_URL 为实际的书籍链接
      return `https://mozilla.github.io/pdf.js/web/viewer.html?file=${this.book.url}`
    }
  },
  methods: {

    handleChange(file, fileList) {
      // 选择文件后的回调函数
      this.fileList = fileList;
    },
    submit() {
      // 点击提交按钮时触发，将上传的文件列表发送到后端
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('files', file.raw)
      })
      console.log(formData)
      friendsApi.showPostTest(formData).then(response => {
        this.urls = response.data
      })
    }
  }
}
</script>

<style>
.book-viewer {
  padding: 20px;
}
.book-content {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 100%;
}
</style>
